<template>
<h1>练习</h1>
  <p v-show="show">hello</p>
  <p v-if="show">world</p>
  <el-button @click="f">切换显示状态</el-button>
  <hr>
  <el-form>
    <el-form-item label="图片URL" style="width: 500px;margin: 0 auto;">
      <el-input placeholder="请输入url"  v-model="imgUrl"></el-input>
    </el-form-item>
  </el-form>
  <br>
  <img :src="imgUrl" alt="无效链接" style="width: 200px;">
  <table border="1">
    <tr>
      <th>商品名称</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item,index) in arr">
      <td>{{item}}</td>
      <td>
        <el-button type="danger" @click="del(item)" size='small'>删除</el-button>
      </td>
    </tr>
  </table>






</template>
<script setup>
import {ref} from "vue";
import index from "vuex";
const show = ref(true);
const f = ()=>{
  show.value = !show.value;
}
const imgUrl = ref("");
const arr = ref([
    'aaa',
    'bbb',
    'ccc',
    'ddd',
    'eee',
    'fff'
]);
const del = (index)=>{
  arr.value.splice(index,1);
}

</script>
<style scoped>
</style>